<template>
  <div>
    <el-dialog title="合同收费项目" :close-on-click-modal="false" :visible.sync="contractFeeListVisible" width="60%">
      <el-table :data="contractFeeItemList" border  v-loading="loading">
        <!--        <el-table-column prop="id" label="编号" align="center"/>-->
        <el-table-column prop="feeItemId" label="项目ID" align="center"/>
        <el-table-column prop="feeItemName" label="项目名称" align="center"/>
        <el-table-column prop="beginDate" label="开始时间" align="center"/>
        <el-table-column prop="endDate" label="结束时间" align="center"/>
        <el-table-column prop="nextBillDate" label="下次缴费时间" align="center"/>
        <el-table-column prop="times" label="缴费次数" align="center"/>
      </el-table>
      <span slot="footer" class="dialog-footer">
      <el-button @click="contractFeeListVisible = false">取 消</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
import {listContractFeeItemByContractId} from "@/api/pay/contract";

export default {
  name: "contract-fee-list",
  data(){
    return{
      loading:false,
      //是否显示弹出层
      contractFeeListVisible:false,
      //表格数据
      contractFeeItemList:[],
    }
  },
  methods:{
    init(id){
      this.contractFeeListVisible=true;
      this.loading=true;
      listContractFeeItemByContractId(id).then(res=>{
        this.contractFeeItemList=res.data;
        this.loading=false;
      })
    },
  }
}
</script>

<style scoped>

</style>
